import React from 'react';
import { View, RefreshControl, Text, SectionList, StatusBar, Switch, TouchableHighlight, Image ,TouchableOpacity} from 'react-native'
import { ScrollView, TextInput } from 'react-native-gesture-handler';
const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={index}>Override{item}</Text>
export default class RefreshControlTest extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
            refreshTimes: 0,
            switchKey: false
        };
    }

    _onRefresh = () => {
        this.setState({ refreshing: true });
        console.log('this.state.refreshTimes', this.state.refreshTimes)
        setTimeout(() => {
            this.setState({ refreshing: false, refreshTimes: this.state.refreshTimes + 1 })
        }, 2000)
    }

    _onPressButton = () => {
        console.debug('点击了按钮')
    }

    onChangeTest = (text) => {
        console.debug('修改了文本', text);
        this.setState({
            inputText: text
        })
    }


    render() {
        // const [value, onChangeText] = React.useState('Useless Placeholder');
        return (
            <ScrollView
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refreshing}
                        onRefresh={this._onRefresh}
                    />
                }
            >
                <Text>刷新了{this.state.refreshTimes}次</Text>
                <Switch
                    value={this.state.switchKey}
                    onValueChange={() => {
                        this.setState({
                            switchKey: !this.state.switchKey
                        })
                        console.debug('this.state.switchKey', this.state.switchKey)
                    }}></Switch>

                <TextInput style={{ borderColor: 'grey', borderWidth: 1, height: 40 }} onChangeText={text => console.debug('文本改变了', text)}

                />

                <TouchableHighlight onPress={this._onPressButton}>
                    <Image
                        style={{ width: 50, height: 50 }}
                        source={{ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' }}
                    />
                </TouchableHighlight>

                <TouchableOpacity onPress={this._onPressButton}>
                    <Image
                        style={{ width: 50, height: 50 }}
                        source={{ uri: 'https://facebook.github.io/react-native/img/tiny_logo.png' }}
                    />
                </TouchableOpacity>
                <Text>{this.state.inputText}</Text>
                <Text>SectionList 方式一</Text>
                <SectionList
                    renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={{ fontWeight: "bold" }}>{title}</Text>
                    )}
                    sections={[
                        { title: "Title1", data: ["item1", "item2"] },
                        { title: "Title2", data: ["item3", "item4"] },
                        { title: "Title3", data: ["item5", "item6"] }
                    ]}
                    keyExtractor={(item, index) => item + index}


                />
                <Text>SectionList 方式二</Text>
                <SectionList
                    renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
                    sections={[
                        { title: 'Title1', data: ['item1', 'item2'], renderItem: overrideRenderItem },
                        { title: 'Title2', data: ['item3', 'item4'] },
                        { title: 'Title3', data: ['item5', 'item6'] },
                    ]}
                />

            </ScrollView>
        )
    }
}